<template>
  <div class="content">
    <Dialog>
      <!-- 简写 -->
      <template #header>
      <!-- <template v-slot:header> -->
        <div>我是Dialog组件的头部</div>
      </template>
      <!-- 简写 -->
      <template #default="{data, index}">
      <!-- <template v-slot="{data, index}"> -->
        <div>{{ data.name }} —— {{ data.age }} —— {{ index }}</div>
      </template>
      <template v-slot:footer>
        <div>我是Dialog组件的底部</div>
      </template>

      <!-- 具名插槽 会覆盖之前的 具名插槽 -->
      <template #[name]>
        <div>我是谁我在哪</div>
      </template>
    </Dialog>
  </div>
</template>


<script setup lang='ts'>
import Dialog from './components/Dialog/index.vue'
import { ref, reactive } from 'vue'

// const name = ref("header")
// const name = ref("default")
const name = ref("footer")

</script>


<style scoped lang='less'>
</style>